<template>
  <div>
      <div class="cover" v-if="isShow"></div>
      <transition @before-enter="handleBeforeEnter" @enter="handleEnter">
          <slot></slot>
      </transition>
  </div>
</template>

<script>
export default {
    data() {
        return {
            isShow:false
        }
    },
    methods: {
        handleBeforeEnter(){
            this.isShow = true
        },
        handleEnter(){
            setTimeout(()=>{
                this.isShow = false
            },200)
        }
    },
}
</script>

<style scoped>
/* 从隐藏到显示 */
.v-enter-active{
    animation: animate  1s linear ;
}
@keyframes animate {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  50% {
    opacity: 0.5;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.cover{
    width:100%;
    height: 100%;
    background:#fff;
    position: fixed;
    z-index: 100;
}
</style>
